<template>
	<view class="shop-detail">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">商家详情</block>
		</cu-custom>
    <my-home-slide v-if="slides.length" @tap="ViewImage(shops.logo)" :mode="'aspectFit'" :slides="slides" :height="'265px'" :indicatorActiveColor="'#F7701F'"></my-home-slide>
		<view class="shop-top">
      <view class="shop-info">
        <text class="shop-name">{{nameText(shops)}}</text>
        <text class="shop-gz" v-if="follow==1" @tap="followShops(0)">已关注</text>
        <text class="shop-gz" v-else @tap="followShops(1)">关注</text>
      </view>
      <view class="shop-evaluate">
        <view class="shop-tel"><text class="cuIcon-dianhua"></text></image><text>{{shops.tel?shops.tel:'暂无'}}</text></view>
        <!-- <view class="shop-stars"><my-stars></my-stars></view> -->
        <!-- <text class="shop-record">156人已消费</text> -->
      </view>
      <view class="shop-des">
        <!-- <text class="shop-des-tip">绿化好</text><text class="shop-des-tip">服务好</text> -->
        <text class="shop-distance" v-if="String(shops.distance)">{{shops.distance}} <text class="cuIcon-locationfill"></text></text>
      </view>
      <!-- <view class="shop-vip" v-if="shops.rebate=='1'"><text class="vip-text">优惠券可抵扣{{(100 - shops.discount * 1).toFixed(2)}}%</text></view> -->
      <!-- <view class="shop-vip" v-else><text class="vip-text">支持专属优惠券</text></view> -->
    </view>
    <view class="shop-middle">
      <view class="shop-address">{{shops.address}}</view>
      <view class="shop-imgs">
        <image class="" v-for="(item, index) in imgs" :key="index" :src="item" mode="widthFix"></image>
      </view>
    </view>
    
    <view v-if="false">
      <view class="shop" v-if="shops.id">
        <image class="img" :src="shops.logo" @tap="ViewImage(shops.logo)" mode="scaleToFill"></image>
        <view class="text">
          <view>{{shops.short_name || shops.title}}</view>
          <view class="next">
            <view>{{shops.tips}}</view>
            <button v-if="follow==1" size="mini" class="notice" @tap="followShops(0)">已关注</button>
            <button v-else size="mini" class="notice" @tap="followShops(1)">关注</button>
          </view>
        </view>
      </view>
      <view class="address" v-if="shops.id">
        <view class="titel">
          {{shops.address}}
        </view>
        <view class="distance">
          <text v-if="String(shops.distance)"> 距您 {{shops.distance}}</text>
        </view>
        <div class="photos" v-if="imgs.length">
          <image v-for="(item, index) in imgs" :key="index" class="img" :src="item" mode="scaleToFill" :data-url="imgs[index]" @tap="ViewImage(imgs, index)"></image>
        </div>

      </view>
    </view>
    
		<button class="bottom" @tap="goMap">到这里</button>
	</view>
</template>

<script>
	import api from "@/api/";
	import user from "@/api/user";
  import MyHomeSlide from "@/components/MyHomeSlide";
  import MyStars from "@/components/MyStars";
	export default {
		data() {
			return {
				shops: {
          discount: 0,
          distance: ''
        },
        share: {
          title: '',
          imageUrl: ''
        },
				follow: 0,
				imgs: [],
        slides: [{
          thumb: '../../../static/default.png'
        }]
			};
		},
    components: {
    	MyHomeSlide,
      MyStars
    },
		onLoad({
			id
		}) {
			this.id = id
			this.getDetail()
		},
    onShareAppMessage(res) {
    	return {
    		title: this.share.title,
        imageUrl: this.share.imageUrl
    	}
    },
		methods: {
      nameText(item) {
        const shortName = item.short_name ? item.short_name.trim() : '';
        const title = item.title ? item.title.trim() : '';
        this.share.title = shortName&&shortName!='null' ? shortName: title;
        this.share.imageUrl = item.logo?item.logo:'';
        return this.share.title
      },
			async getDetail() {
				let res = await api.shopDetail({
					spid: this.id
				})
				if (res.code == 1) {
          console.log(res)
					this.shops = res.data.shop;
					this.slides = [{thumb: res.data.shop.logo}];
					this.follow = res.data.followStatus;
					this.imgs = res.data.albumInfo || [];
				}

			},
			async followShops(num) {
				this.follow = !this.follow;
				let res = await user.followShop({
					spid: this.id,
					followStatus: num
				})
				if (res.code == 1) {
					uni.showToast({
						title: res.msg
					})
				} else {
					this.follow = !this.follow;
				}
			},
			async goMap() {
				if (!this.shops.lat || !this.shops.lng) {
					return this.toast('商家暂未设置导航');
				}
				const [err, res] = await uni.openLocation({ //​使用微信内置地图查看位置。
					latitude: parseFloat(this.shops.lat), //要去的纬度-地址
					longitude: parseFloat(this.shops.lng), //要去的经度-地址
					name: this.shops.short_name || this.shops.title,
					address: this.shops.address
				})
				if (err) {
					this.toast(err.errMsg)
				}
			},
			ViewImage(urls, index = 0) {
				let imgList = [];
				imgList = imgList.concat(urls);
				uni.previewImage({
					urls: imgList,
					current: 0
				});
			},
      callTel(tel) {
      	if (!tel) {
      		this.toast('暂无联系电话');
      		return;
      	}
      	uni.makePhoneCall({
      		phoneNumber: tel
      	});
      }
		}
	};
</script>

<style lang="less">
	.shop-detail {
    .shop-top{
      padding-bottom: 10px;
      background: #fff;
      .shop-info{
        padding: 10px 15px;
        .shop-name{
          font-size: 16px;
          font-weight: 600;
        }
        .shop-gz{
          font-size: 12px;
          color: #5C8AE6;
          font-weight: 500;
          border: 1px solid #5C8AE6;
          border-radius: 6px;
          padding: 2px 4px;
          margin-left: 10px;
          vertical-align: baseline;
          position: relative;
          top: -1px;
        }
      }
      
      .shop-evaluate{
        padding: 0 15px;
        position: relative;
        .shop-stars{
          display: inline-block;
          width: 50%;
        }
        .shop-record{
          position: absolute;
          left: 35%;
          top: -1px;
          color: #A1A1A1;
          font-size: 14px;
          &::before{
            content: "";
            position: absolute;
            left: -16px;
            top: 2px;
            height: 16px;
            width: 1px;
            background: #A1A1A1;
          }
         }
      }
      
      .shop-des{
        padding: 0 25% 0 15px;
        margin-top: 5px;
        line-height: 24px;
        position: relative;
        .shop-des-tip{
          font-size: 12px;
          color: #9A9898;
          background: #E6E6E6;
          padding: 2px 4px;
          border-radius: 4px;
          margin-right: 5px;
        }
        .shop-distance{
          position: absolute;
          right: 15px;
          font-size: 14px;
          color: #9A9898;
        }
      }
      
      .shop-vip{
        margin: 15px;
        height: 35px;
        background: url(../../static/vip_bg.png) no-repeat center center;
        background-size: cover;
        border-radius: 4px;
        .vip-text{
          font-size: 16px;
          color: #fff;
          font-weight: 500;
          padding-left: 50px;
          line-height: 35px;
        }
      }
    }
    .shop-middle{
      padding: 10px 15px 50px 15px;
      background: #fff;
      margin-top: 10px;
      .shop-address{
        font-size: 14px;
        font-weight: 600;
      }
      .shop-imgs{
        margin: 10px 0;
        image{
          width: 100%;
        }
      }
    }
    .bottom{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: #F63021;
      color: #fff;
      border-radius: 0;
    }
    .shop-tel{
      font-size: 13px;
      .cuIcon-dianhua{
      	font-size: 28rpx;
      	color: #5c5c5c;
      	padding-right: 5rpx;
      }
    }
	}
</style>
